<!--安全核查-->
<template>
  <div id="toBeCheckedList">
    <div style="margin-bottom: 10px;">
      <van-search v-model="form.propertyPerson" show-action placeholder="请输入户主姓名" @search="serachData">
        <template #left>
          <div @click="show = true" style="margin-right: 5px;"><van-icon name="arrow-down" />{{ areaValue }}</div>
        </template>
        <template #action>
          <div style="display: flex;align-items: center;">
            <van-icon @click="show1 = true" name="filter-o" style="color: #3f8ffc;font-size: 20px;margin-right: 8px;" />
            <van-button @click="showMap()" type="info" size="small"><van-icon name="exchange" />地图</van-button>
          </div>
        </template>
      </van-search>
      <van-popup v-model="show" round position="bottom">
        <van-cascader v-model="form.cityCode" title="选择所属区域" :options="options" @change="onChange" @finish="onFinish"
          :closeable="false" style="position: relative;" />
        <span style="position: absolute; top: 0%; right: 10px;font-size: 16px;height: 48px;line-height: 48px;"
          @click="close">确定</span>
      </van-popup>
      <van-popup v-model="show1" closeable title="筛选" position="bottom" show-cancel-button>
        <div
          style="height: 45px;line-height: 45px;font-size:16px;text-align: center;border-bottom: 1px solid #ccc;color: black;font-weight: bold ">
          筛选</div>
        <div class="searchWrap">
          <van-field label-width="4em" v-model="areaValue" is-link readonly label="所属区域" placeholder="请选择所属区域"
            @click="show = true" />
          <van-field label-width="4em" name="radio" label="核查结论">
            <template #input>
              <van-radio-group v-model="form.inspectResult" direction="horizontal">
                <van-radio name="0">基本安全</van-radio>
                <van-radio name="1">存在风险</van-radio>
                <van-radio name="3">危房正在整治中</van-radio>
                <van-radio name="4">已拆除</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label-width="4em" name="radio" label="房屋用途">
            <template #input>
              <van-radio-group v-model="form.houseUsage" direction="horizontal">
                <van-radio name="1">经营性自建房</van-radio>
                <van-radio name="2">其他自建房</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label-width="4em" name="radio" label="数据来源">
            <template #input>
              <van-radio-group v-model="form.dataSource" direction="horizontal">
                <van-radio name="0">网格巡查</van-radio>
                <van-radio name="2">农户提交</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label-width="4em" name="radio" label="核查时间">
            <template #input>
              <van-field style="width: calc(50% - 10px);float: left;padding: 0;" :border="false" label-width="0"
                v-model="form.inspectStaterDate" clearable label="" placeholder="请选择开始时间" @focus="showStart = true" />
              <span style="float: left;line-height: 24px;">-</span>
              <van-field style="width: calc(50% - 10px);float: left;padding: 0;" :border="false" label-width="0"
                v-model="form.inspectEndDate" clearable label=" " placeholder="请选择结束时间" @focus="showEnd = true" />
            </template>
          </van-field>
          <!-- 开始时间控件 -->
          <van-popup v-model="showStart" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" @confirm="confirm" @cancel="cancel" />
          </van-popup>
          <!-- 结束时间控件 -->
          <van-popup v-model="showEnd" position="bottom">
            <van-datetime-picker v-model="currentDate1" type="date" @confirm="confirm1" @cancel="cancel1" />
          </van-popup>
        </div>
        <div style="text-align: center;margin-bottom: 10px;">
          <van-button plain type="info" style="width: 47%;" @click="restForm()">重置</van-button>
          <van-button plain style="width: 47%;" @click="sureForm()">确定</van-button>
        </div>
      </van-popup>
    </div>
    <div v-if="nowIndex == 0" class="toBeCheckedList-nfcc">
      <div class="toBeCheckedList-middle1" ref="toBeCheckedListMiddle1">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <van-list v-model="loading" :offset="4" :finished="finished" @load="onLoad" finished-text="没有更多了"
          class="toBeCheckedList-middle1">
          <van-cell v-for="(item, index) in ListDataOption" :key="index" @click="handleAdd(item)">
            <ul class="toBeCheckedList-middle">
              <li class="toBeCheckedList-middle2">
                户主姓名：{{ item.propertyPerson }}
              </li>
              <li class="toBeCheckedList-middle4">
                自建房排查编号：{{ item.checkNumber }}
              </li>
              <li class="toBeCheckedList-middle4">
                房屋用途：{{ item.houseUsage }}
              </li>
              <li class="toBeCheckedList-middle4">
                数据来源：{{ item.dataSource }}
              </li>
              <li class="toBeCheckedList-middle4">
                巡查时间：{{ item.patrolDate }}
              </li>
              <li class="toBeCheckedList-middle4">
                地址：{{ item.detailAddress }} <img @click.stop="showGeo(item)" style="margin-right: 4px" width="10"
                  src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
              </li>
            </ul>
          </van-cell>
        </van-list>
        <!-- </van-pull-refresh> -->
      </div>
    </div>
    <div v-if="nowIndex == 1">
      <van-list v-model="loading" :offset1="4" :finished="finished" @load="onLoad" finished-text="没有更多了"
        class="toBeCheckedList-middle1">
        <van-cell v-for="(item, index) in ListDataOption" :key="index" @click="handleAdd(item)">
          <ul class="toBeCheckedList-middle">
            <li class="toBeCheckedList-middle2">
              户主姓名：{{ item.propertyPerson }}
            </li>
            <li class="toBeCheckedList-middle4">
              自建房排查编号：{{ item.checkNumber }}
            </li>
            <li class="toBeCheckedList-middle4">
              核查结论：{{ item.inspectResult }}
            </li>
            <li class="toBeCheckedList-middle4">
              房屋用途：{{ item.houseUsage }}
            </li>
            <li class="toBeCheckedList-middle4">
              数据来源：{{ item.dataSource }}
            </li>
            <li class="toBeCheckedList-middle4">
              巡查时间：{{ item.patrolDate }}
            </li>
            <li class="toBeCheckedList-middle4">
              核查人：{{ item.inspectPerson }}

            </li>
            <li class="toBeCheckedList-middle4">

              核查时间：{{ item.inspectDate }}
            </li>
            <li class="toBeCheckedList-middle4">
              地址：{{ item.detailAddress }}<img @click.stop="showGeo(item)" style="margin-right: 4px" width="10"
                src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
            </li>
          </ul>
        </van-cell>
      </van-list>
    </div>
    <div class="sort bottomfix">
      <ul>
        <li v-for="(item, index) in bottomList" :key="index" :class="{ secelt: nowIndex == index }"
          @click="bottomListBtn(item, index)">
          <el-badge v-if="index == 0" :value="dbTotal" :max="99" class="item">
            {{ item }}
          </el-badge>
          <span v-else>
            {{ item }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import axios from 'axios'
import { housePublichouseRemoldUnitBuildinspectList } from '../../../utils/api'
import { GetAdministrative, getDatalistForTree } from '@/utils/api'
export default {
  data() {
    return {
      startPage: 0,
      loading: false,
      finished: false,
      refreshing: false,
      radio: false,
      nowIndex: 0,
      areaValue: "惠州市",
      bottomList: ['待核查', '已核查'],
      showPicker: false,
      showPicker1: false,
      show: false,
      show1: false,
      showStart: false,
      showEnd: false,
      currentDate: new Date(),
      currentDate1: new Date(),
      dataSource: '',
      options: [],
      sourData: [
        {
          name: '全部',
          val: ''
        },
        {
          name: '网格巡查',
          val: 0
        },
        {
          name: '巡查新增',
          val: 1
        },
        {
          name: '农户提交',
          val: 2
        }
      ],
      CountyData: [],
      sortList: [
        {
          title: '所属区域',
          name: 'RWZT',
          sort: 'asc'
        },
        {
          title: '数据来源',
          name: 'RWZT',
          sort: 'asc'
        }
      ],
      BaseURL: window.g.BaseURL + '/api/farmerHouse',
      active: '0',
      form: {
        propertyPerson: null,
        cityCode: null,
        dataSource: null,
        inspectEndDate: null,
        houseUsage: null,
        inspectResult: null,
        inspectStaterDate: null,
      },
      ISShow: true,
      cityCode: window.localStorage.getItem('citycode').replace(/(0+)$/g, ''),
      ListDataOption: [],
      totalCount: 0,
      dbTotal: 0
    }
  },
  components: {},
  methods: {
    onRefresh() {
      this.startPage = 0
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.ListDataOption = []
      this.onLoad()
    },
    onLoad() {
      // if (this.refreshing) {
      //     this.ListDataOption = [];
      //     this.refreshing = false;
      // }
      this.startPage += 1
      this.getData()
    },
    getCountyData: async function () {
      this.CountyData = []
      let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + window.localStorage.getItem('citycode'))
      if (webResult.data.data) {
        debugger
        webResult.data.data.unshift({
          citycode: window.localStorage.getItem('citycode'),
          cityname: "全部"
        })
      }
      this.CountyData = webResult.data.data
    },
    bottomListBtn(item, index) {
      if(this.loading) {
        this.$toast.fail("正在查询，请勿切换!");
        return false
      }
      // 避免重复点击
      if(this.nowIndex == index){
        return false
      }
      this.nowIndex = index
      this.onRefresh()
    },
    onConfirm(val) {
      if (val.cityname == '') {
        this.sortList[0].title = '所属区域'
      } else {
        this.sortList[0].title = val.cityname
        this.cityCode = val.citycode
      }
      this.showPicker = false
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
    onConfirm1(val) {
      if (val.name == '') {
        this.sortList[1].title = '数据来源'
      } else {
        this.dataSource = val.val
        this.sortList[1].title = val.name
      }
      this.showPicker1 = false
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
    //字段排序
    _sortlichange(item, index) {
      const self = this
      if (item.sort == 'asc') {
        item.sort = 'desc'
      } else {
        item.sort = 'asc'
      }
      if (index == 0) {
        this.showPicker = true
        this.showPicker1 = false
      } else {
        this.showPicker1 = true
        this.showPicker = false
      }
    },
    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${(date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1}-${date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()}`
    },
    //确认开始日期
    confirm(date) {
      this.showStart = false
      this.form.inspectStaterDate = this.formatDate(this.currentDate)
    },
    //确认结束日期
    confirm1(date) {
      this.showEnd = false
      this.form.inspectEndDate = this.formatDate(this.currentDate1)
    },
    cancel() {
      this.showStart = false;
      this.form.inspectStaterDate = ""
    },
    cancel1() {
      this.showEnd = false
      this.form.inspectEndDate = ""
    },
    handleAdd(data) {
      this.$router.push({
        path: '/toBeChecked',
        query: {
          data: JSON.stringify(data),
          type: this.nowIndex
        }
      })
    },
    showMap(data) {
      this.$router.push({
        path: '/SecurityMain',
        query: {
          citycode: this.form.cityCode,
          cityname: this.areaValue,
        }
      })
    },
    serachData(val) {
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
    //重置
    restForm() {
      for (var i in this.form) {
        this.form[i] = null;
      }
      let cityCode = "441300000000"
      if (window.localStorage.getItem('citycode') && window.localStorage.getItem('citycode') != "330000000000") {
        cityCode = window.localStorage.getItem('citycode')
      }
      this.$set(this.form, 'cityCode', cityCode)
      if (window.localStorage.getItem('cityName') && window.localStorage.getItem('cityName') !== '惠州市') {
        this.areaValue = window.localStorage.getItem('cityName')
      } else {
        this.areaValue = "杭州市"
      }
    },
    //确定
    sureForm() {
      this.show1 = false;
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
    //定位
    showGeo: async function (item) {
      let webResult = await axios.get(this.BaseURL + '/tfwZjf/getZjfGeomP?yhfwbh=' + item.checkNumber, {
        headers: {
          isOutParam: true,
        },
      });
      if (webResult.data.data && webResult.data.data.length > 0) {
        let dataValue = [{ "geomP": webResult.data.data[0] }]
        var url = window.g.oneMapUrlLocation + "?user=" + window.localStorage.getItem("citycode") + "&data=" + encodeURIComponent(JSON.stringify(dataValue))
        window.open(url)
      } else {
        this.$toast.fail("坐标不能为空!")
      }

    },
    async getData() {
      let _this = this;
      this.loading = true;
      let parm = {
        pageNo: this.startPage,
        pageSize: 20,
        cityCode: this.cityCode ? this.cityCode.toString().replace(/(0+)$/g, '') : '3301',
        propertyPerson: this.form.propertyPerson,
        patrolProcessNode: this.nowIndex == 0 ? 1 : 2,
        dataSource: this.dataSource
      }
      for (var i in this.form) {
        if (this.form[i]) {
          if (i == 'cityCode') {
            parm[i] = this.form[i].toString().replace(/(0+)$/g, '')
          } else if (i == 'inspectStaterDate') {
            parm[i] = this.form[i] + " 00:00:00"
          } else if (i == 'inspectEndDate') {
            parm[i] = this.form[i] + " 23:59:59"
          } else {
            parm[i] = this.form[i]
          }
        }
      }
      let webResult = await housePublichouseRemoldUnitBuildinspectList(parm)
      if (webResult.data.code == 200) {
        let pageList = webResult.data.data.pageList
        if (pageList.length > 0) {
          this.finished = false
          this.ListDataOption.push(...pageList)
        } else {
          this.finished = true
        }
        if (this.ListDataOption.length >= webResult.data.data.totalCount) {
          this.finished = true
          // return
        }
        this.totalCount = webResult.data.data.totalCount
        if (this.nowIndex == 0) {
          this.dbTotal = webResult.data.data.totalCount
        }
      } else {
        this.finished = true
      }
      this.loading = false
    },
    getXianOpenDataView: async function (data) {
      debugger
      if (window.localStorage.getItem('citycode') != "330000000000") {
        this.options = [{
          text: window.localStorage.getItem('cityName'),
          value: window.localStorage.getItem('citycode'),
          isHasChild: true
        }]
      }
      const res = await getDatalistForTree(data)
      res.data.data.forEach((item) => {
        let obj = {
          text: item.cityname,
          value: item.citycode,
        }
        if (item.citycode.toString().substring(9, 12) !== "000") {

        } else {
          obj['children'] = []
        }
        this.options.push(obj)
      })
      // this.options = res.data.data
    },
    getXZQH: async function (value, selectedOptions, tabIndex) {
      var res = await GetAdministrative(value)
      selectedOptions[tabIndex].children = []
      if (res.data.data.length > 0) {
        res.data.data.forEach((element) => {
          let obj = {
            text: element.cityname,
            value: element.citycode
          }
          if (element.citycode.toString().substring(9, 12) !== "000") {

          } else {
            obj['children'] = []
          }
          selectedOptions[tabIndex].children.push(obj)
        })
      }
    },
    onChange({ value, selectedOptions, tabIndex }) {
      if (value.toString().substring(9, 12) !== "000" || selectedOptions[0].isHasChild) {

      } else {
        this.getXZQH(value, selectedOptions, tabIndex)
      }
      this.onFinish({ value, selectedOptions, tabIndex })
    },
    onFinish({ value, selectedOptions, tabIndex }) {
      this.areaValue = selectedOptions[selectedOptions.length-1].text;
      this.form.cityCode = value
      // this.form.cityCode.length == 3 ? (this.IsShowAre = false) : ''
    },
    close() {
      this.show = false;
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
  },
  created() {
    this.startPage = 0
    this.ListDataOption = []
  },
  mounted() {
    this.getXianOpenDataView(window.localStorage.getItem('citycode'))
    this.restForm()
    dd.ready(function () {
      dd.setTitle({
        title: '安全核查'
      })
        .then((res) => { })
        .catch((err) => {
          console.error(err)
        })
    })
    this.getCountyData()
  }
}
</script>
<style lang="scss" scoped>
#toBeCheckedList {
  height: 100vh;
  overflow: auto;
  background: #eee;
  width: 100vw;

  .sort {
    height: 5vh;
    line-height: 5vh;
    background: #fff;

    ul {
      display: flex;

      li {
        width: 100%;
        text-align: center;
        // font-size: 1.6vh;
        font-weight: 400;
        color: #6c6c6c;
        cursor: pointer;

        img {
          height: 1.5vh;
        }
      }
    }
  }

  .searchWrap {
    padding: 10px 0;

    .stitle {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      color: #3f8ffc;
    }
  }

  .bottomfix {
    border-radius: 10px;
    // height: 5vh;
    background: #fff;
    margin: 10px 0px;

    .secelt {
      background: #3f8ffc;
      border-radius: 10px;
      color: #fff;
      // border-top-left-radius: 10px;
      // border-bottom-left-radius: ;
    }
  }

  .title {
    width: 100%;
    height: 46px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
  }

  .toBeCheckedList-footer {
    width: 99%;
    margin-top: 4px;
    margin: 0 auto;
    padding-top: 12px;
  }

  .toBeCheckedList-middle1 {
    height: calc(100vh - 120px);
    // overflow: auto;
    overflow-y: auto;

    .toBeCheckedList-middle {
      background-color: #fff;
      border-radius: 10px;
      padding: 8px 10px;
      width: 98%;
      margin: 0 auto;

      .toBeCheckedList-middle2 {
        font-size: 18px;
        font-weight: 1000;
        color: black;
        line-height: 36px;
      }

      .toBeCheckedList-middle3 {
        font-size: 14px;
        color: #aaa;
        line-height: 24px;

        span {
          float: right;
          // padding-left: 4vw;
        }
      }

      .toBeCheckedList-middle4 {
        font-size: 14px;
        color: #aaa;
        line-height: 24px;

        span {
          float: right;
          // padding-left: 4vw;
        }
      }
    }
  }
}
</style>
<style>
#toBeCheckedList .van-tab {
  font-size: 18px;
}
</style>
